<template>
	<view class="video_view">
		<!-- <view class="h2">{{video.title}}</view> -->
		<swiper :duration="1000" :vertical=true class="swiper" @change="currentChange">
			<swiper-item class="swiper_item" v-for="(item,index) in VideoList" :key="index" :id="item.id">
				<video style="width:100%;height: 100%;" :id="item.id" controls="controls" show-casting-button="true"
					:preload="none" :controls='false' play-btn-position="center" :object-fit="fill"
					@play="playing(item.id,item.image_src,item.title)" :show-center-play-btn="false" @waiting="waiting" @timeupdate="timeupdate"
					@controlstoggle="controlstoggle" :loop="true" @fullscreenclick="fullscreenclick"
					@loadedmetadata="loadedmetadata" @fullscreenchange="fullscreenchange" :title="true"
					:src="item.video_src" :poster="item.img" @click="onclick(item.id)">
					<image src="../../../static/images/paly.png" mode="" class="playradio" v-if="!play"></image>
				</video>
				<view class="ButtonGroup">
					<image :src="item.enterprise_logo" mode="" class="collect"></image>
					<!-- 点赞 -->
					<view style="display: flex; flex-direction: column;align-items:center;">
						<image src="../../../static/images/aixin.png" mode="" class="collect" @click="collect(item.id)"
							v-if="item.lovesType == 1">
						</image>
						<image src="../../../static/images/aixinRed.png" mode="" class="collect"
							@click="collect(item.id)" v-else></image>
						<view class="" style="color: #FFFFFF; font-size: 10px;">
							{{item.loves}}
						</view>
					</view>
					<!-- 评论 -->
					<view style="display: flex; flex-direction: column;align-items:center;">
						<image src="../../../static/images/comment.png" mode="" class="comment"
							@click="commentList(item.id)"></image>
						<view class="" style="color: #FFFFFF; font-size: 10px;">
							{{item.comments}}
						</view>
					</view>
					<!-- 转发 -->
					<view style="display: flex; flex-direction: column;align-items:center;">
						<button open-type="share" plain="true" @click="forward(item.id)" style="border: 0;">
							<image src="../../../static/images/forward.png" mode="" class="forward"></image>
						</button>
						<!--  <image src="../../../static/images/forward.png" mode="" class="forward"
							@click="forward(item.id)"></image> -->
						<view class="" style="color: #FFFFFF; font-size: 10px;">
							{{item.forwards}}
						</view>
					</view>
				</view>
				<view class="information">
					<!-- 商品 -->
					<view class="commodity" v-if="item.product" @click="ProductDetails(item.product_id)">
						<image :src="item.product.image" mode=""></image>
						<view class="">
							<view class=""
								style="color: #FFFFFF;font: 14px; width: 100px;overflow: hidden;white-space: nowrap;">
								{{item.product.store_name}}
							</view>
							<view class="">
								<span style="color: red;font-size: 12px;">￥{{item.product.price}}</span>
							</view>
						</view>
					</view>
					<view class="EnterpriseName">
						{{item.title}}
					</view>
					<view class="introduction">
						{{item.des}}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="showComment" v-if="showComment">
			<view class="commentQu">
				<view class="" style="height: 30px;">
					<image src="../../../static/images/arrow-close.png" mode=""
						style="float: right; height: 20px;width: 20px;" @click="showComment=false"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 36vh;">
					<view class="" v-for="(item,index) in CommentLists" :key="index">
						<!-- 一级 -->
						<view class="commentBlock">
							<image
								:src="item.avatar.includes('http') ? item.avatar :'../../../static/images/def_avatar.png'"
								mode="" class="headSculpture"></image>
							<view class="" style="margin-left: 20rpx;" @click="reply(item.id)">
								<view class="" style="color: #A9A9A9;font-size: 12px;">
									{{item.nickname}}
								</view>
								<view class="" style="margin-top: 5px;">
									{{item.content}}
									<span style="font-size: 10px; color:#A9A9A9;margin-left: 5px;">回复</span>
								</view>
								<view class="" style="color: #A9A9A9;font-size: 12px;">
									{{item.add_time}}
								</view>
							</view>
						</view>
						<!-- 二级 -->
						<view class="secondary" v-if="item.children.length > 0" v-for="(items,indexs) in item.children"
							:key="indexs">
							<image
								:src="items.avatar.includes('http') ? items.avatar :'../../../static/images/def_avatar.png'"
								mode="" class="headSculpture"></image>
							<view class="" style="margin-left: 20rpx;" @click="reply(items.pid)">
								<view class="" style="color: #A9A9A9;font-size: 12px;">
									{{items.nickname}}
								</view>
								<view class="" style="margin-top: 5px;">
									{{items.content}}
									<span style="font-size: 10px; color:#A9A9A9;margin-left: 5px;">回复</span>
								</view>
								<view class="" style="color: #A9A9A9;font-size: 12px;">
									{{item.add_time}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="chatting" :style="{'bottom': keyboardHeight+'px'}">
					<!-- <image src="../../../static/images/increase.png" mode="" class="chatting_Increase"></image> -->
					<textarea class="chatting_ipt" placeholder="请输入内容" confirm-type=send :adjust-position="false"
						auto-height="true" v-model="chattingVlue" :focus="cursor" auto-blur=true @focus="chattingFocus"
						@blur="chattingBlur"></textarea>
					<view class="chatting_left">
						<image src="../../../static/images/expression.png" mode="" class="chatting_Expression"
							@click="expressionShow">
						</image>
						<button class="chatting_Sending" size='mini' @click="transmit">发送</button>
					</view>
				</view>
				<!-- 表情包 -->
				<view class="expression" v-if="chattingExpression" :style="{'bottom':keyboardHeight+50+'px'}">
					<view v-for="(item, key) in emojiData" :key="key" class="expression-emoji">
						<text v-for="(emoji, index) in item" :key="index" @click="expression(emoji)"
							class="expression-emoji-icon">{{ emoji }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getQiyeVideoMessage,
		get_video,
		videoLove,
		getForward,
		getCommentList,
		addComment,
	} from "@/api/userminp.js"
	import {
		productDetail // 商品详情
	} from '@/api/product.js'
	import emoji from "../emojs/emoji.js"; //引入表情包
	import {
		getconfig,
	} from '@/api/public.js'
	export default {
		data() {
			return {
				// 视频信息
				video: [],
				// 播放按钮
				playback: false,
				// 播放控件
				playComponent: false,
				//  视频id
				id: null,
				VideoList: [],
				videoContext: {},
				showComment: false,
				CommentLists: [],
				chattingVlue: '', //聊天框内容
				resStart: 0, //input光标位置
				cursor: false, //是否聚焦
				chattingExpression: false, //控制表情包显隐
				keyboardHeight: '0', //底部输入框的高度
				emojiData: [], //保存表情
				videoId: '', //视频id
				pid: '',
				qiyeName: '',
				showinformatin: true,
				qiyeID: null,
				play: true,
				zhuanfaId: null,
				fximage:'',
				shareTitle:''
			}
		},
		onReady: function(res) {
			// this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(e) {
			this.zhuanfaId = e.share_uid
			getconfig().then(res => {
				if (!uni.getStorageSync('QIYEID')) {
					uni.setStorageSync('QIYEID', res.data.mpconfig.mp_default_mer_id)
				}
				this.mpPhone = res.data.mpconfig.mp_phone
				this.mpwx = res.data.mpconfig.mp_wexin_no
			}).then(() => {
				this.qiyeID = uni.getStorageSync('QIYEID') // 企业名片id
				this.id = e.id
				if (e.id) {
					getQiyeVideoMessage({
							id: e.id
						}).then(res => {
							this.$set(res.data, 'lovesType', 1)
							this.VideoList.push(res.data)
						}).then(res => {
							uni.createVideoContext(String(e.id)).play();
						})
						.then(res => {
							this.getVideolist()
						})
				} else {
					this.getVideolist(this.qiyeID)
				}
			})


			for (let i = 0; i < 71; i++) {
				this.emojiData[i] = [];
				for (let k = 0; k < 71; k++) {
					emoji[i * 71 + k] ? this.emojiData[i].push(
						emoji[i * 71 + k]
					) : ''
				}
			};
		},
		onShow(e) {},
		onShareAppMessage() {
			return { // 自定义分享内容
				title: this.shareTitle,
				path: `/pages/webview/playVideo/playVideo?share_uid=${uni.getStorageSync("QIYEID")}`,
				imageUrl:this.fximage
			}
		},
		onShareTimeline() {
			return { // 自定义分享内容
				title: this.shareTitle,
				path: `/pages/webview/playVideo/playVideo?share_uid=${uni.getStorageSync("QIYEID")}`,
				imageUrl:this.fximage
			}
		},
		methods: {
			//点击事件
			onclick(id) {
				this.play = !this.play
				console.log(this.play, id);
				if (this.play) {
					uni.createVideoContext(String(id)).play();
				} else {
					uni.createVideoContext(String(id)).pause();
				}
			},

			// 跳转商品详情
			ProductDetails(productId) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${productId}`
				})
			},
			// 发送
			transmit() {
				let uid = uni.getStorageSync('user_info').uid
				if (this.pid === '') {
					addComment({
						id: this.videoId,
						uid: uid,
						content: this.chattingVlue
					}).then(res => {
						this.chattingVlue = ''
						this.getCommentLists()
					})
				} else {
					addComment({
						id: this.videoId,
						uid: uid,
						pid: this.pid,
						content: this.chattingVlue
					}).then(res => {
						this.chattingVlue = ''
						this.pid = ''
						this.getCommentLists()
					})
				}

			},
			//输入框聚焦
			chattingFocus(e) {
				this.cursor = true
				this.keyboardHeight = e.detail.height //获取键盘高度
			},
			//输入框失焦时触发
			chattingBlur(e) {
				this.cursor = false; //聚焦
				this.resStart = e.target.cursor //保存光标位置
				this.keyboardHeight = '0'
			},
			//表情包展示
			expressionShow(e) {
				this.chattingExpression = !this.chattingExpression
				this.keyboardHeight = e.detail.height //获取键盘高度
				this.cursor = true
			},
			// 表情包点击事件
			expression(emoji) {
				this.cursor = false; //失焦
				this.cursor = true; //失焦
				console.log(this.resStart);
				// 返回获取从0到光标位置的字符串
				let str = this.chattingVlue.substring(0, this.resStart)
				// 将表情插入指定位置
				this.chattingVlue = this.chattingVlue.replace(str, str + emoji)
				this.resStart = this.resStart + 2;
				// 光标向后移动两位
				// setTimeout(() => {
				// 	 //光标加2(表情是占两个位置)
				// 	this.cursor = true //设置聚焦
				// }, 101)
			},
			// 回复
			reply(pid) {
				this.cursor = true
				this.pid = pid
			},
			getCommentLists() {
				getCommentList({
					id: this.videoId
				}).then(res => {
					this.CommentLists = res.data
				}).catch(res => {
					console.log(res);
				})
			},
			// 评论
			commentList(videoId) {
				this.showComment = true
				this.videoId = videoId
				this.getCommentLists()
			},
			// 转发
			forward(videoId) {
				let uid = uni.getStorageSync('user_info').uid
				getForward({
					uid: Number(uid),
					id: Number(videoId)
				}).then(res => {
					console.log(res);
				})

			},
			// 点赞
			collect(videoId) {
				let uid = uni.getStorageSync('user_info').uid
				videoLove({
					uid: Number(uid),
					id: Number(videoId)
				}).then(res => {
					this.VideoList.forEach((item, index) => {
						if (item.id == videoId) { //判断key为999的对象是否存在，
							this.$set(this.VideoList[index], 'lovesType', res.data.result)
						}
					})
				})
				// .then(res=>{
				// 	this.getVideolist()
				// })
			},
			currentChange(event) {
				let index = event.detail.current
				let id = this.VideoList[index].id
				uni.createVideoContext(String(id)).play();
				let trailer = this.VideoList;
				trailer.forEach((item, index) => {
					let temp = item.id;
					if (temp != id) {
						uni.createVideoContext(String(temp)).pause();
					}
				})
				// if(index+1 === this.VideoList.length){
				// 	console.log(1);
				// 	get_video({
				// 		enterprise_id: this.qiyeID,
				// 		page:2
				// 	}).then(res=>{
				// 		console.log(res);
				// 	})
				// }

			},
			playing(e,image,title) {
				let currentId = e
				this.fximage = image
				this.shareTitle = title
				this.play = true
				this.videoContext = uni.createVideoContext(String(currentId));
				let trailer = this.VideoList;
				trailer.forEach((item, index) => {
					let temp = item.id;
					if (temp != currentId) {
						uni.createVideoContext(String(temp)).pause();
					}

				})
			},
			// 视频时间更新
			timeupdate(e) {
				this.VodLoadText = ''
				this.currentTimeVod = e.detail.currentTime
			},

			// 视频元数据加载完成时触发。event.detail = {width, height, duration}
			loadedmetadata() {
				let id = this.VideoList[0].id
				uni.createVideoContext(String(id)).play();
			},
			// 视频出现缓冲时触发
			waiting(e) {
				this.VodLoadText = '缓存中请稍等'
			},
			getVideolist() {
				// uni.getStorageSync('user_info').enterprise_id
				if (this.share_uid) {
					carduser({
						share_uid: this.share_uid
					}).then(res => {
						this.mpPhone = res.data.phone
						this.mpwx = res.data.wechat
					}).then(() => {
						get_video({
							enterprise_id: uni.getStorageSync('user_info').enterprise_id
						}).then(res => {
							res.data.list.forEach((item, index) => {
								if (item.id == this.id) {} else {
									getQiyeVideoMessage({
										id: item.id
									}).then(req => {
										item.comments = req.data.comments
										item.forwards = req.data.forwards
										item.product = req.data.product
										item.product_id = req.data.product_id
										if (uni.getStorageSync('USER_INFO')) {
											item.enterprise_logo = JSON.parse(uni
												.getStorageSync('USER_INFO')).avatar
										} else {
											item.enterprise_logo = req.data.enterprise_logo
										}
										this.$set(item, 'lovesType', 1)
										this.$set(item, 'loves', req.data.loves)
										this.VideoList.push(item)
									})
								}
							})
						})
					})
				} else {
					let id = null
					if (this.zhuanfaId) {
						id = this.zhuanfaId
					} else {
						id = uni.getStorageSync('QIYEID')
					}
					get_video({
						enterprise_id: id
					}).then(res => {
						res.data.list.forEach((item, index) => {
							if (item.id == this.id) {} else {
								getQiyeVideoMessage({
									id: item.id
								}).then(req => {
									item.comments = req.data.comments
									item.forwards = req.data.forwards
									item.product = req.data.product
									item.product_id = req.data.product_id
									if (uni.getStorageSync('USER_INFO')) {
										item.enterprise_logo = JSON.parse(uni.getStorageSync(
											'USER_INFO')).avatar
									} else {
										item.enterprise_logo = req.data.enterprise_logo
									}
									this.$set(item, 'lovesType', 1)
									this.$set(item, 'loves', req.data.loves)
									this.VideoList.push(item)
								})
							}
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.playradio {
		position: fixed;
		top: 48vh;
		left: 48vw;
		z-index: 999;
		height: 40px;
		width: 40px;
	}

	.expression {
		width: 90vw;
		height: 15vh;
		position: fixed;
		left: 5vw;
		background-color: #e9ebe3;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		overflow-y: scroll;
		bottom: 140rpx;

		&-emoji {
			width: 100%;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			text-align: center;

			&-icon {
				display: inline-block;
				width: 47px;
				text-align: center;
				padding: 10.5 0;
			}
		}
	}

	.showComment {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;

		.commentQu {
			height: 50vh;
			width: 100vw;
			background-color: #FFFFFF;
			border-radius: 10px 10px 0 0;
			padding: 4vw;

			.commentBlock {
				display: flex;

				.headSculpture {
					height: 80rpx;
					width: 80rpx;
				}
			}

			.secondary {
				display: flex;
				margin-left: 80rpx;
				margin-top: 10px;

				.headSculpture {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.chatting {
				position: fixed;
				bottom: 0;
				height: 50px;
				width: 90%;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background-color: #F6F6F6;

				.chatting_ipt {
					height: 25px;
					width: 60%;
					border-radius: 5%;
					border: 1px #E8E8E8 solid;
					flex-shrink: 0;
				}

				.chatting_left {
					display: flex;
					align-items: center;

					.chatting_Expression {
						height: 20px;
						width: 20px;
						margin-right: 10px;
					}

					.chatting_Sending {
						width: 55px;
						height: 25px;
						font-size: 10px;
						background-color: #1ACF13;
						color: #FFFFFF;
						text-align: center;
					}
				}
			}
		}
	}

	.information {
		position: fixed;
		left: 5vw;
		bottom: 5vh;
		z-index: 50;

		.commodity {
			height: 100rpx;
			width: 40vw;
			background-color: rgba(0, 0, 0, 0.3);
			display: flex;
			justify-content: flex-start;
			padding: 15rpx 10rpx;
			margin-bottom: 5px;

			image {
				height: 35px;
				width: 35px;
				border-radius: 5px;
				margin-right: 20rpx;
			}
		}

		.EnterpriseName {
			font-size: 16px;
			color: #FFFFFF;
		}

		.introduction {
			margin-top: 2vh;
			font-size: 14px;
			color: #FFFFFF;
			width: 70vw;
			overflow-x: hidden;
		}
	}

	.swiper {
		height: 100vh;
		width: 100vw;
		z-index: 10;
	}

	.swiper_item {
		width: 100vw;
		height: 100vh;
	}

	.ButtonGroup {
		height: 30vh;
		position: fixed;
		z-index: 50;
		right: 5vw;
		bottom: 5vh;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.collect {
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
	}

	.comment {
		height: 60rpx;
		width: 60rpx;
	}

	.forward {
		height: 60rpx;
		width: 60rpx;
	}

	.video_view {
		height: 100vh;
		width: 100vw;
		background-color: #000000;
	}
</style>